<style>
    .rbutton{
      color: primary;
      position : relative;
      float:none;
      width: 90%;
      left: 5%;
    }
    .rbutton2{
      float: right;
      border-radius: 12px;
      font-size: 70%;

    }
    .inputStyle{
        width: 50%
    }

    .inputfile {
    width: 1%;
    height: 1%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }
  .img1{
    z-index: 0;
    height: 100%;
    width: 90%;
    padding: 0px;
  }
  .abutton{
    position: absolute;
    left:13rem;
    top:13rem;
  }

  .bbutton{
    position: absolute;

  }

  .div2{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }


    .div3{
      display: inline-block;
      width: 50%;
    }

    .div4{
      display: inline-block;
      width: 30%;
    }
    .div-inline{
    width: 30%;
    }

    li{
      float: left;
      list-style: none;
      width: 18px;
    }
    .tempEditQuestion{
             font-family:"华文细黑";
             font-size: 1px;
             background-color: #efefef
        }
    </style>

    <ion-header>
         <ion-navbar>
            <ion-title>
                  <!--<ion-icon ios="ios-arrow-back" md="md-arrow-back"  (click)="return()" left></ion-icon>-->
                添加错题
                <ion-icon name="heart-outline"  style="margin-right:15%;float:right"></ion-icon>
                <ion-icon name="basket" md="ios-basket-outline" style="margin-right:10%;float:right"></ion-icon>

            </ion-title>
            </ion-navbar>
    </ion-header>
    <ion-content class="tempEditQuestion">

        <div style="overflow:scroll;overflow-y:hidden;overflow-x:hidden">
          <ion-item>
            <h4>科目:  {{this.subject}}
            <label style="float:right;color:darkgray;">时间: {{currentDate}}</label>
            </h4>
          </ion-item>


          <ion-item class="item-text-wrap">

                <h6>题目:  </h6>

                <div class="div2" *ngIf="quesItemFlag == true" >
                  <div *ngFor="let item of quesPiclist;let i = index">
                  <img [src]="item.path" id="quesImage_i" *ngIf="item.flag" (click) = "changePicImgSize(quesImage_i)" />

                    <div>
                      <p style="color:rgb(56, 55, 55); text-align:left;padding-left:5%" *ngIf=" substituteFlag == true">{{substituteQuestionChosen.questionTitle}}</p>
                    </div>

                    <div>
                      <button ion-button *ngIf="(substituteButtonFlag == true)" (click)="toSubstitutePage(0)">已查找到原题，点击可查看详情</button>
                     <!-- <button ion-button *ngIf="substituteButtonFalseFlag==true">未找到匹配题目</button>-->
                    </div>
                  </div>

                </div>


              <div class="div2">
                  <label for="pickfiles" style="padding-left:5%; width:30%">
                 <!-- <ion-icon ios="ios-camera" md="md-camera" style="font-size:40px"></ion-icon>-->
                 <img src="./../assets/icon/camera3.png">
                  </label>
                  <input type="file" multiple="multiple" id="pickfiles" class="inputfile" (change)="quesImgChange($this)"/>

              <label>
                 <img src="./../assets/icon/t3.png" (click)=" toSubstitutePage(1)"/>
              </label>
             </div>
            <div *ngIf="this.hasChooseQuestion == true">
              <p [innerHTML]="this.substituteQuestionChosen.title"></p>
            </div>

          </ion-item>

          <ion-item>
              <h6>答案:  </h6>
              <div class="div2" >
              <div *ngFor="let item of answerPiclist;let i = index">

                 <img [src]="item.path" id="image_i" *ngIf="item.flag" (click) = "changeImgSize(image_i)" />

              </div>

              </div>

              <div class="div2">
                  <label for="pickfiles2" style="padding-left:5%; width:30%">
                 <img src="./../assets/icon/camera3.png">
                  </label>
                  <input type="file" multiple="multiple" id="pickfiles2" class="inputfile" (change)="answerImgChange($this)" />

              <!--<label>
                 <img src="./../assets/icon/t3.png" (click)=" toSubstitutePage(1)"/>
              </label>-->
             </div>
            <div *ngIf="this.hasChooseQuestion == true">
              <p [innerHTML]="this.substituteQuestionChosen.answer"></p>
              <p [innerHTML]="this.substituteQuestionChosen.pharse"></p>
            </div>

        </ion-item>

        <ion-list>
          <ion-item>
              <h4>掌握程度</h4>
              <li *ngFor="let item of starList;let i = index" item-right>
              <img src="{{item}}" ng-disabled="editFlag" (click)="checkStar(i)" style="width:16px"/>
              </li>
          </ion-item>

          <ion-item>
            <ion-label style="color:black"><h3>来源: </h3></ion-label>
            <ion-input type="text" [(ngModel)] = "source" color="primary" style="font-size:80%"></ion-input>
          </ion-item>

           <ion-item (click)="presentModal()">
              <h4>知识点
              <button ion-button outline class="rbutton2" *ngFor="let item of pointsSelected">{{item}}</button>
              </h4>
            </ion-item>

           <ion-item (click)="doMultiChoice()">
             <h4>错误原因
              <button ion-button outline class="rbutton2" *ngFor="let item of testCheckboxResult">{{item}}</button>
             </h4>
            </ion-item>
        </ion-list>

        <div class="rbutton"><button ion-button padding-top block (click)="submitMistakes()">submit</button></div>

        <!--<div class="rbutton"><button ion-button padding-top block (click)="gotoShowPage()">确定</button></div>-->

        </div>
    </ion-content>
